<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Tab选项卡焦点图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #start {
            display: block;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        #banner {
            width: 800px;
            height: 450px;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }

        #banner_imgs {
            width: 4800px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #banner_imgs li {
            float: left;
        }

        #banner_imgs img {
            width: 800px;
            /* height: 100%; */
            /* 加上height:100%会导致图片显示异常；可能是外层套a标签又没声明block，所以百分比属性可能没拿到高度导致的。另外img单写一个width或者height，另外一个不写的话一般按默认auto是可以保持等比缩放的，写了的话反而容易变形。
            */
            display: block;

        }

        #left {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px 20px 20px 0;
            border-color: transparent red;
            position: absolute;
            top: calc(50% - 20px);
            left: 0;
            background-color: RGBA(0, 0, 0, .3);
            display: none;
        }

        #right {
            border-style: solid;
            border-width: 20px 0 20px 20px;
            border-color: transparent red;
            position: absolute;
            top: calc(50% - 20px);
            left: calc(100% - 20px);
            background-color: RGBA(0, 0, 0, .3);
            display: none;
        }

        #number {
            width: 100%;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 20px;
        }

        #number a {
            display: inline-block;
            width: 20px;
            border: 1px solid red;
            height: 10px;
        }

        .number_color {
            background-color: red;
        }

        #left:hover,
        #right:hover {
            background-color: RGBA(0, 0, 0, .7);
        }
    </style>
    <script src="js/webqq_project.js"></script>
</head>

<body>
    <input id="start" type="button" value="发送验证码">
    <div id="banner">
        <div id="banner_ul">
            <ul id="banner_imgs">
                <li>
                    <a href="javascript:">
                        <img src="./img/jiaodian1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="./img/jiaodian2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="./img/jiaodian3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="./img/jiaodian4.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <img src="./img/jiaodian5.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div id="number">
            <a class="number_color" href="javascript:"></a>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
            <a href="javascript:"></a>
        </div>
        <div id="left"></div>
        <div id="right"></div>
    </div>

    <script>
        window.onload = function () {
            var start = document.getElementById('start');
            var countdown_number = 60;
            var countdown_timer = null;
            //倒计时
            var banner_imgs = document.getElementById('banner_imgs');
            var banner = document.getElementById('banner');
            var number = document.getElementById('number');
            var number_a = number.getElementsByTagName('a');
            var left = document.getElementById('left');
            var right = document.getElementById('right');
            var index = 0;
            var banner_imgs_width = banner_imgs.getElementsByTagName('img')[0].width;
            var timer = '';


            start.onclick = function () {
                countdown_timer = setInterval(function () {
                    start.disabled = 'ture';
                    start.value = countdown_number-- + '秒后重试';
                    if (countdown_number === 0) {
                        start.disabled = '';
                        start.value = '发送验证码';
                        countdown_number = 60;
                        clearInterval(countdown_timer);
                    }
                }, 500);
            };

            for (var y = 0; y < number_a.length; y++) {
                number_a[y].id = y;
                number_a[y].onmouseover = function () {
                    move(this.id, -banner_imgs_width);
                    index = Number(this.id);//此处有大坑，id默认类型是字符串类型，需要转换；
                }
            }//设置index值和当前图的值绑定

            function click_type(click_type) {
                if (click_type.onclick) {
                    if (click_type === right) {
                        if (index === 4) {
                            index = 0;
                        }
                        else {
                            index++
                        }
                    }
                    if (click_type === left) {
                        if (index === 0) {
                            index = 4;
                        }
                        else {
                            index--;
                        }
                    }
                }
            }//点击函数，根据左右点击类型index值进行变化

            function move(index_number, width) {
                for (var i = 0; i < number_a.length; i++) {
                    banner_imgs.style.left = index_number * width + "px";
                    if (number_a[i].className === 'number_color') {
                        number_a[i].className = '';
                    }
                    number_a[index_number].className = 'number_color';
                }
            }//图片移动位置和当前所显示的红点

            banner.onmouseover = function () {
                stop();
                right.style.display = 'block';
                left.style.display = 'block';
            };

            banner.onmouseout = function () {
                play();
                right.style.display = 'none';
                left.style.display = 'none';
            };

            left.onclick = function () {
                click_type(left);
                move(index, -banner_imgs_width);

            };

            right.onclick = function () {
                click_type(right);
                move(index, -banner_imgs_width);
            };

            function play() {
                timer = setInterval(
                    function () {
                        right.onclick();
                    }, 1500)
            }

            function stop() {
                clearInterval(timer)
            }

            play();
        }
    </script>
</body>

</html>